/*
 * @Author: xuhongling
 * @Date:   2023-08-24 14:51:00
 * @Last Modified by:   xuhongling
 * @Last Modified time: 2024-12-05 15:49:44
 */
import dateTimeLabelFormat from '@/hooks/web/useDateTimeFormat';

// ECharts Option
const setChartOption = (chartData) => {
  // 按镇名分组数据
  const townMap = new Map();

  // 处理数据，按镇名分组
  chartData.forEach(item => {
    if (!townMap.has(item.town)) {
      townMap.set(item.town, {
        town: item.town,
        sms_success: 0,
        sms_fail: 0,
        call_success: 0,
        call_fail: 0
      });
    }

    const townItem = townMap.get(item.town);
    if (item.log_type === 1) { // 电话语音
      townItem.call_success = item.success_num;
      townItem.call_fail = item.total_num - item.success_num;
    } else if (item.log_type === 2) { // 短信
      townItem.sms_success = item.success_num;
      townItem.sms_fail = item.total_num - item.success_num;
    }
  });

  // 转换为数组并排序
  const processedData = Array.from(townMap.values());

  // 提取镇名作为X轴数据
  const townNames = processedData.map(item => item.town);

  // 准备系列数据
  const series = [
    {
      name: '短信成功数',
      type: 'bar',
      data: processedData.map(item => item.sms_success),
      stack: 'sms',
  barWidth: 12,
    },
    {
      name: '短信失败数',
      type: 'bar',
      data: processedData.map(item => item.sms_fail),
      stack: 'sms',
      barWidth: 12,
    },
    {
      name: '电话语音成功数',
      type: 'bar',
      data: processedData.map(item => item.call_success),
      stack: 'call',
      barWidth: 12,
    },
    {
      name: '电话语音失败数',
      type: 'bar',
      data: processedData.map(item => item.call_fail),
      stack: 'call',
      barWidth: 12,
    }
  ];

  const chartOption = {
    color: ['#91cc75', '#fac858', '#5470c6', '#ee6666'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      left: "center",
      top: "10",
      itemWidth: 20,
      data: ['短信成功数','短信失败数','电话语音成功数','电话语音失败数'],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '80px',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: townNames,
      axisLine: {
        lineStyle: {
          color: '#000'
        }
      },
      axisTick: {
        alignWithLabel: true
      },
      axisLabel: {
        interval: 0,
        rotate: townNames.length > 5 ? 30 : 0 // 如果镇名太多就旋转
      },

    },
    yAxis: {
      type: 'value',
      name: '数量',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#000'
        }
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#eee'
        }
      }
    },
    series: series
  };

  return chartOption;
}

export default setChartOption;
